// import { useState, useEffect, useReducer } from 'react'
// import Header from './Compontents/Header';
// import Search from './Compontents/Search';
// import Movie from './Compontents/Movie';
// // reduce引入数据的方式
// import spinner from './assets/ajax-loader.gif'
// // 放心地把数据交给数据中心
// import { initialState, reducer } from './store/reducer';
// import axios from 'axios';
// const App = () => {
//   // useReduce向数据中心申请数据
//   const [state, dispatch] = useReducer(reducer, initialState);
//   // console.log(state);
//   // console.log(dispatch);
//   // state是页面的数据状态
//   const { movies, errorMessage, loading } = state;
//   console.log(movies, errorMessage, loading);
//   // axios movies => dispatch reducer ...state, movies
//   useEffect(() => {
//     // loading改成false
//     // useState setLoding(以前用这个改),现在数据不再本地,在数据仓库
//     // setTimeout(() => {
//     //   dispatch({ type: 'SEARCH_MOVIES_SUCCESS' })
//     // }, 2000);
//     axios.get('https://www.omdbapi.com/?s=man&apikey=4a3b711b')
//       .then(data => {
//         console.log(data);
//         dispatch({
//           type: 'SEARCH_MOVIES_SUCCESS',
//           payload: data.data.Search
//         })
//       })
//   }, [])
//   return (
//     <div className="">
//       <Header text="React Hooks Movie"></Header>
//       <Search></Search>
//       {loading ? <img className="spinner" src={spinner} /> : ''};
//       {
//         movies.map(movie => <Movie movie={movie} />)
//       }
//     </div>
//   )
// }
// export default App;



import { useReducer } from 'react';
import { useEffect } from 'react/cjs/react.development';
import './App.css';
import { initialState, reducer } from './store/reducer';
import axios from 'axios';
import Movie from './Compontents/Movie';
import Search from './Compontents/Search';
import './App.css';
import spinner from './assets/ajax-loader.gif';
// console.log(spinner);

const App = () => {
  // 与数据中央(store)联系
  // useReducer
  // useEffect api
  // loading 全局状态
  // 1. 联系中央 不只管理数据，还管理数据的流向和修改
  // 2. state 某一时刻是既定的 动态
  // movies
  // 组件函数 必须返回JSX(可以把html在js里写出来)
  const [state, dispatch] = useReducer(reducer, initialState);

  // state.loading = false
  // console.log(state);
  const { loading, movies, errorMessage } = state;
  // console.log(loading, movies, errorMessage);
  useEffect(() => {
    // console.log('onload');
    dispatch({
      type: 'SEARCH_MOVIES_SUCCESS',
      payload: []
    })
    axios.get(`https://www.omdbapi.com/?s=woman&apikey=4a3b711b`)
      .then(data => {
        // console.log(data);
        let payload = data.data.Search;
        dispatch({
          type: 'SEARCH_MOVIES_SUCCESS',
          payload
        })
      })
  }, [])

  const search = searchValue => {
    dispatch({
      type: 'SEARCH_MOVIES_LOADING',
    })

    axios
      .get(`http://www.omdbapi.com/?s=${searchValue}&apikey=4a3b711b`)
      .then(res => {
        if (res.data.Error) {
          dispatch({
            type: 'SEARCH_MOVIES_ERROR'
          })
          console.log(res.data.Error);
          return
        }
        console.log(res);
        let payload = res.data.Search
        dispatch({
          type: 'SEARCH_MOVIES_SUCCESS',
          payload
        })
      })
  }
  return (
    <div className="App">
      <Search search={search} />
      {
        loading ? <img src={spinner} className="spinner" alt="loading spinner" /> : ''
      }
      {
        movies.length ?

          <div className="movies">
            {
              movies.map(movie => <Movie movie={movie} key={movie.imdbID} />)
            }
          </div> : `<p>${errorMessage}</p>`
      }
    </div>
  )
};

export default App;